<div>
  <div class="searchItem">
    <label>订单编号：</label>
    <input nz-input placeholder="请输入订单编号" [(ngModel)]="query.orderNum"/>
  </div>
  <div class="searchItem">
    <label>打款状态：</label>
    <nz-select [(ngModel)]="query.payFlag" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="待支付"></nz-option>
      <nz-option [nzValue]="1" nzLabel="已支付"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>发货状态：</label>
    <nz-select [(ngModel)]="query.status" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="待发货"></nz-option>
      <nz-option [nzValue]="1" nzLabel="已发货"></nz-option>
      <nz-option [nzValue]="2" nzLabel="已取消"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>店铺：</label>
    <nz-select [(ngModel)]="query.storeId" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option *ngFor="let s of storeList" [nzValue]="s['storeId']" [nzLabel]="s['storeName']"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>商品：</label>
    <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="query.goods"/>
  </div>
  <div class="searchItem">
    <label>用户：</label>
    <input nz-input placeholder="请输入用户名活手机号" [(ngModel)]="query.name"/>
  </div>

  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div>
    <button nz-button nzType="primary" (click)="export()">导出</button>
  </div>
</div>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="tableData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="tableData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <!--    <th [nzChecked]="tableChecked" [nzIndeterminate]="tableIndeterminate"-->
    <!--        (nzCheckedChange)="onTableChecked($event)"></th>-->
    <th nzAlign="center" nzWidth="640px">商品</th>
    <th nzAlign="center">订单金额</th>
    <th nzAlign="center">打款状态</th>
    <th nzAlign="center">发货状态</th>
    <th nzAlign="center" nzWidth="290px">收货人</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of rowSelectionTable.data">
    <tr style="background-color: #fafafa">
      <td [colSpan]="24">
        <span style="margin-right: 4px">订单号：<span style="color: #1890ff">{{ data['orderNum'] }}</span></span>
        <span>下单时间：{{data['createTime']}}</span>
      </td>
    </tr>
    <tr style="width: 100%">
      <td style="padding-left: 32px;padding-top: 32px;position: relative">
        <div *ngFor="let detail of data['details']"
             style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">
          <img
            nz-image
            width="70px"
            height="70px"
            style="margin-right: 8px"
            [nzFallback]="errImg"
            [nzSrc]="detail['icon']"
            [alt]="detail['goodsName']"
          />
          <span style="width: 100%">
            <div style="display: flex;flex-direction: row;justify-content: space-between">
              <span style="color: #1890ff">{{detail['goodsName']}}</span>
              <span>￥{{detail['price']}}</span>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between">
              <span  style="color: #999999">{{detail['goodsCode']}}</span>
              <span>{{detail['num']}}件</span>
            </div>
            <!--      <a style="color: #1890ff" *ngIf="detail.source===0" href=".#/goods/goodsTabs/{{detail.goodsId}}"-->
            <!--         target="_blank">{{detail['goodsName']}}</a>-->
          </span>
        </div>
      </td>
      <td nzAlign="center">
        商品总价：￥{{ data['totalPrice'] }}<br>
        实际收款：￥{{ data['realPrice'] }}
      </td>
      <td nzAlign="center">{{ data['payFlag'] === 0 ? '待支付' : '已支付' }}</td>
      <td nzAlign="center">
        {{STATUS[data['status']]}}
      </td>
      <td nzAlign="center">
        {{data['consignee']}} {{data['tel']}}<br>
        {{data['area']}} {{data['address']}}
      </td>
    </tr>
  </ng-container>
  </tbody>
</nz-table>

<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ tableData.total }} 条</ng-template>
